<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="xbsj-labels" content="Earth示例"></meta>
    <title>自定义贴地矩形-image</title>
    <!-- 0 引入js文件 -->
    <script src="../../XbsjEarth/XbsjEarth.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        #canvas-container {
            width: 600px;
            height: 600px;
            position: absolute;
            right: 0px;
            top: 0px;
        }
    </style>
</head>

<body>
    <div id="earthContainer" style="width: 100%; height: 100%; background: grey">
    </div>
    <script>
        var earth;
        var bgImagery;

        function startup() {
            earth = new XE.Earth('earthContainer');

            earth.sceneTree.root = {
                "children": [
                    {
                        "czmObject": {
                            "name": "谷歌影像",
                            "xbsjType": "Imagery",
                            "xbsjImageryProvider": {
                                "XbsjImageryProvider": {
                                    "url": "//www.google.cn/maps/vt?lyrs=s,h&gl=CN&x={x}&y={y}&z={z}",
                                    "srcCoordType": "GCJ02",
                                    "dstCoordType": "WGS84",
                                    "maximumLevel": 21,
                                },
                            }
                        },
                    }, {
                        "czmObject": {
                            "xbsjType": "Terrain",
                            "name": "中国14级（测试）",
                            "xbsjTerrainProvider": {
                                "type": "XbsjCesiumTerrainProvider",
                                "XbsjCesiumTerrainProvider": {
                                    "url": "//lab.earthsdk.com/terrain/577fd5b0ac1f11e99dbd8fd044883638",
                                    "requestVertexNormals": true,
                                    "requestWaterMask": true
                                }
                            }
                        }
                    }
                ]
            };

            var p = createGroundCircle(earth);

            p.flyTo();

            window.p = p; // 方便调试
        }

        // 1 XE.ready()会加载Cesium.js等其他资源，注意ready()返回一个Promise对象。
        XE.ready().then(startup);

        function createGroundCircle(earth) {
            var p = new XE.Obj.CustomGroundRectangle(earth)
            p.position = [2.02729390339372, 0.6980810742548738, 755.036813823199];
            p.width = 3000;
            p.height= 3000;
            p.canvasWidth = 512;
            p.canvasHeight = 512;
            // p.color = [0.5, 0.8, 1, 2];
     
            // 贴图片方式1：
            // 自定义绘制贴地图片，足够灵活，但代码会写得比较多，比较复杂
            p.preUpdateEvalString = `
                if (!p._myCircleImageLoading) {
                    p._myCircleImageLoading = true;

                    Cesium.Resource.createIfNeeded('./images/circle.png').fetchImage().then(function(image) {
                        console.log('image loaded!');
                        p._myCircleImage = image;
                    });
                }

                if (typeof p._myAngle === 'undefined') {
                    p._myAngle = 0.0;
                }
                p._myAngle -= 1.0;
                if (p._myAngle > 360.0) {
                    p._myAngle = 0.0;
                }
                const rotation = p._myAngle / 180.0 * Math.PI;

                p.drawCanvas(ctx => {
                    ctx.clearRect(0, 0, 512, 512);

                    ctx.beginPath();
                    ctx.strokeStyle = "rgb(128, 128, 128)"; 
                    // ctx.setLineDash([8, 8]);
                    ctx.lineWidth = 1;
                    ctx.arc(256, 256, 250, 0, Math.PI*2, true);
                    ctx.stroke();

                    if (p._myCircleImage) {
                        ctx.save();
                        ctx.translate(256, 256);
                        ctx.rotate(rotation);
                        ctx.translate(-256, -256);
                        ctx.drawImage(p._myCircleImage, 0, 0);
                        ctx.restore();
                    }
                });
            `;

            // 贴图片方式2：
            // 新增imageUrl属性，可以直接设置，使用很简单；
            // 但缺点是没办法自行drawCanvas，不够灵活
            // p.imageUrl = './images/circle.png';
            // p.preUpdateEvalString = `
            //     p.rotation += 6.0 / 180.0 * Math.PI;
            //     if (p.rotation > Math.PI * 2.0) {
            //         p.rotation = 0.0;
            //     }
            // `;

            return p;
        }        
    </script>
</body>

</html>